<template>
    <div class="brokerage-WithdrawList">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "佣金"},{"name": "提现记录", "url": "/WithdrawList"}]'></tz-breadcrumb>
      <!-- 搜索表单 -->
      <!--<form class="form" autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">-->
    <el-form :inline="true" :model="formInline" class="form" label-position="left" label-width="90px" @submit.native.prevent="onSubmit" >
        <el-row :gutter="0">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div>

              <!-- 服务商名称 -->
              <el-form-item class="form-item" label="用户 名称">
                <el-input class="time" v-model="formInline.name" placeholder=""></el-input>
              </el-form-item>
              <!-- 订单编号 -->
              <el-form-item class="form-item" label="提现编号">
                <el-input class="time" v-model="formInline.id" placeholder=""></el-input>
              </el-form-item>
              <!-- 审核状态 -->
              <el-form-item class="form-item" label="审核状态">
                <!--<el-input class="time" v-model="formInline.withdraw_status" placeholder=""></el-input>-->
                <el-select v-model="formInline.withdraw_status" placeholder="审核状态">
                  <el-option
                          v-for="item in withdraw_status"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 时间选择 -->
              <el-form-item class="form-item" label="">
                <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='timeChange'></el-date-picker>
              </el-form-item>
              <el-form-item  class="form-item">
                <el-col native-type='submit' :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
                    <el-button type="primary" size='medium' native-type='submit'>搜索</el-button>
                </el-col>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索结果 -->
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="" label="提现编号">
          <template slot-scope="props">
            <span>{{ props.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="提现人手机/真实姓名">
          <template slot-scope="props">
            <span>{{ props.row.user_phone }}<br>{{ props.row.pay_username}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="" label="微信open_id/未绑定">
          <template slot-scope="props">
            <span>{{ props.row.pay_account }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="申请时间">
          <template slot-scope="props">
            <span>{{ props.row.applic_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="提现状态">
          <template slot-scope="props">
            <span>{{ props.row.withdraw_status | withdrawStatus}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="提现金额">
          <template slot-scope="props">
            <el-tag>{{ props.row.withdraw_cash }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" fixed="right">
          <template slot-scope="props">
            <!--20000.00<span class="pay-number">(共111笔)</span>-->
            <!--<el-button type="primary" @click="onSubmit">详情</el-button>-->
            <el-button type="primary" @click="withdrawDetails( props.row.id )">详情</el-button>
            <el-button type="primary" v-if="props.row.withdraw_status === 1" @click="clickWithdrawCheck( props.row.id )">拒绝提现</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="total > formInline.limit" class="text-center pager" @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
</template>

<script>
import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import api from './../../api/api';
import http from './../../config/index';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data () {
    return {
      // 表单数据
      formInline: {
        token: localStorage.getItem('token'),
        start_time: '',
        end_time: '',
        id: '',
        name: '',
        // uid: '',
        withdraw_status: '',
        // time: '',
        // isvId: '',
        page: 1,
        limit: 10
      },
      labelPosition: 'left',
      loading: false,
      time: [],
      withdraw_status: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '待审核'
        },
        {
          value: '1',
          label: '审核通过'
        },
        {
          value: '2',
          label: '提现失败'
        },
        {
          value: '3',
          label: '提现通过待打款'
        },
        {
          value: '4',
          label: '打款成功'
        }
      ],
      withdraw_check: {
        id: 0,
        is_withdraw_status: 2,
        pass: '',
        remark: ''
      },
      tableData: [],
      total: 0
    };
  },
  filters: {
    withdrawStatus (val) {
      let str = '';
      switch (val) {
        case 0:
          str = '待审核';
          break;
        case 1:
          str = '审核通过';
          break;
        case 2:
          str = '提现失败';
          break;
        case 3:
          str = '提现通过待打款';
          break;
        case 4:
          str = '打款成功';
          break;
      }
      return str;
    }
  },
  methods: {
    // 提交搜索
    onSubmit: function () {
      console.log(1);
      let that = this;
      that.formInline.page = 1;
      that.requestData();
    },
    handleCurrentChange (val) {
      this.formInline.page = val;
      this.requestData();
    },
    timeChange (val) {
      // 日期空间确定时触发
      this.formInline.start_time = msToDate(val[0]);
      this.formInline.end_time = msToDate(val[1]);
    },
    // 提现详情
    withdrawDetails (id) {
      this.$router.push({
        path: '/WithdrawDetails',
        query: {
          id: id
        }
      });
    },
    clickWithdrawCheck (id) {
      let that = this;
      that.$prompt('请输入拒绝审核密码', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'password'
      }).then(({ value }) => {
        that.withdraw_check.id = id;
        that.withdraw_check.pass = value;
        that.withdrawCheck();
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    withdrawCheck () {
      let that = this;
      http.post(api.WithdrawCheck, {
        token: localStorage.getItem('token'),
        id: that.withdraw_check.id,
        is_withdraw_status: that.withdraw_check.is_withdraw_status,
        pass: that.withdraw_check.pass,
        remark: that.withdraw_check.remark
      }, response => {
        if (response.code === 10001 || response.code === '10001') {
          // 隐藏按钮
          // 提示成功
          that.$message({
            message: '提现已拒绝',
            type: 'success'
          });
          that.requestData();
        } else {
          // 提示失败
          that.$message({
            message: response.msg,
            type: 'warning'
          });
        }
      }, err => {
        console.log(err);
      });
    },
    requestData () {
      let that = this;
      that.loading = true;
      http.post(api.WithdrawAccount, {
        token: localStorage.getItem('token'),
        start_time: that.formInline.start_time,
        end_time: that.formInline.start_time,
        id: that.formInline.id,
        name: that.formInline.name,
        withdraw_status: that.formInline.withdraw_status,
        page: that.formInline.page,
        limit: that.formInline.limit
      }, response => {
        that.loading = false;
        if (response.code === 10001 || response.code === '10001') {
          that.tableData = response.data[0].result.data;
          that.total = response.data[0].result.total;
        } else {
          that.tableData = [];
          that.total = 0;
        }
      }, err => {
        console.log(err);
        that.loading = false;
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.brokerage-WithdrawList
  .form
    padding: 2rem
    padding-bottom: 0
    margin-top: 15px
    margin-bottom: 12px
    box-sizing: border-box
    background: #fff
    box-shadow: 1px 1px 1px #999
    .form-item
      display: inline-block
      margin-right: 35px
      margin-bottom: 0
      padding-bottom: 2rem
      .time
        width: 200px
  .pay-number
    color: #ff4400
    margin-left: 5px
</style>
